<template>
	<view class="bill-container flex fd-c">
		<topBar :back="false" :isPerson="false">
			<template #center style="width: 100%;">
				<!-- 导航栏 -->
				<view class="nav-bar flex ai-c jc-c">
					<view class="nav-tabs">
						排行榜
					</view>
				</view>
			</template>
		</topBar>
		<view class="tab">
			<!-- tab切换 -->
			<view class="tab-nav flex jc-sb ai-c">
				<view v-for="(tab, index) in tabs" :key="index" style="font-size: 28rpx;color: #666;" class="tab-item"
					:class="{ 'active': activeTab === index }" @click="switchTab(index)">
					{{ tab.name }}
				</view>
			</view>
		</view>
		<!-- 内容区域 -->


		<view v-if="activeTab === 0" class="tab-content flex-1 flex fd-c">
			<view class="ranking-header">
				<view class="header-item rank-col" style="font-size: 24rpx;font-weight: 700;color:#333;">排名
				</view>
				<view class="header-item name-col" style="font-size: 24rpx;font-weight: 700;color:#333;">姓名
				</view>
				<view class="header-item score-col" style="font-size: 24rpx;font-weight: 700;color:#333;">总积分
				</view>
			</view>
			<scroll-view class="scrollable-content" scroll-y>
				<view class="ranking-header" style="background: #fff;" v-for="(item, index) in rankingList"
					:key="item.id">
					<view class="header-item rank-col flex ai-c jc-c">
						<image v-if="index + 1 === 1" src="/static/diyiminghuangguan.png"
							style="width: 48rpx;height: 48rpx;">
						</image>
						<image v-else-if="index + 1 === 2" src="/static/diermingxioaguan.png"
							style="width: 48rpx;height: 48rpx;"></image>
						<image v-else-if="index + 1 === 3" src="/static/sanyuan.png"
							style="width: 48rpx;height: 48rpx;">
						</image>
						<view v-else
							style="width: 48rpx;height: 48rpx;text-align: center;font-weight: 500;font-size: 24rpx;"
							class="flex ai-c jc-c">
							<text>{{ index + 1 }}</text>
						</view>
					</view>
					<view class="header-item name-col single-ellipsis"
						style="color: rgba(0, 0, 0, 0.9);font-weight: 500;">
						<text style="font-weight: 700;color:#0F50DC;font-size: 24rpx;" v-if="index + 1 === 1">{{
							item.nickname }}</text>
						<text v-else style="font-size: 24rpx;">{{ item.nickname }}</text>
					</view>
					<view class="header-item score-col single-ellipsis" style="font-weight: 700;">
						<text style="font-weight: 700;color:#0F50DC;font-size: 32rpx;" v-if="index + 1 === 1">{{
							item.leiscore
						}}</text>
						<text style="font-weight: 700;font-size: 32rpx;" v-else>{{ item.leiscore }}</text>
					</view>
				</view>
			</scroll-view>


		</view>
		<view v-if="activeTab === 1" class="tab-content flex-1 flex fd-c">
			<view class="ranking-header" style="background: linear-gradient(97deg, #E8E5FF 0%, #FFE5ED 100%);">
				<view class="header-item rank-col">排名</view>
				<view class="header-item name-col">姓名</view>
				<view class="header-item level-col">大师</view>
				<view class="header-item level-col">专家</view>
				<view class="header-item level-col">高级</view>
				<view class="header-item level-col">中级</view>
				<view class="header-item level-col" style="text-align: right;">初级</view>
			</view>
			<scroll-view class="scrollable-content" scroll-y>
				<view class="ranking-header" style="background: #fff;" v-for="(item, index) in pengyouquanList"
					:key="item.id">
					<view class="header-item rank-col flex ai-c jc-c">
						<image v-if="index + 1 === 1" src="/static/diyiminghuangguan.png"
							style="width: 48rpx;height: 48rpx;font-size: 24rpx;"></image>
						<image v-else-if="index + 1 === 2" src="/static/diermingxioaguan.png"
							style="width: 48rpx;height: 48rpx;font-size: 24rpx;"></image>
						<image v-else-if="index + 1 === 3" src="/static/sanyuan.png"
							style="width: 48rpx;height: 48rpx;font-size: 24rpx;">
						</image>
						<view v-else style="width: 48rpx;height: 48rpx;text-align: center;font-weight: 500;"
							class="flex ai-c jc-c">
							<text style="color:#0F50DC;font-size: 24rpx;" v-if="index + 1 === 1">{{ index + 1
							}}</text>
							<text v-else>{{ index + 1 }}</text>
						</view>
					</view>
					<view class="header-item name-col single-ellipsis"
						style="color: rgba(0, 0, 0, 0.9);font-weight: 500;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.name }}</text>
						<text v-else>{{ item.name }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.dashi
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.dashi }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.zhuanjia
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.zhuanjia }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.gaoji
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.gaoji }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.zhongji
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.zhongji }}</text>
					</view>
					<view class="header-item level-col" style="text-align: right;font-weight: 700;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.chuji
						}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.chuji }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="activeTab === 2" class="tab-content flex-1 flex fd-c">

			<view class="ranking-header"
				style="background: linear-gradient(97deg, #DDFFDC 0%, #FFEFE5 100%);margin-bottom: 24rpx;">
				<view class="header-item rank-col" style="text-align: left;padding-left: 34rpx;">IP地址</view>
				<view class="header-item name-col" style="text-align: right;font-weight: 100;">安徽省</view>
			</view>
			<view class="ranking-header" style="background: linear-gradient(97deg, #E5F7FF 0%, #E5E6FF 100%);">
				<view class="header-item rank-col">排名</view>
				<view class="header-item name-col">姓名</view>
				<view class="header-item level-col">大师</view>
				<view class="header-item level-col">专家</view>
				<view class="header-item level-col">高级</view>
				<view class="header-item level-col">中级</view>
				<view class="header-item level-col" style="text-align: right;">初级</view>
			</view>
			<scroll-view class="scrollable-content" scroll-y>
				<view class="ranking-header" style="background: #fff;" v-for="(item, index) in pengyouquanList"
					:key="item.id">
					<view class="header-item rank-col flex ai-c jc-c">
						<image v-if="index + 1 === 1" src="/static/diyiminghuangguan.png"
							style="width: 48rpx;height: 48rpx;">
						</image>
						<image v-else-if="index + 1 === 2" src="/static/diermingxioaguan.png"
							style="width: 48rpx;height: 48rpx;"></image>
						<image v-else-if="index + 1 === 3" src="/static/sanyuan.png"
							style="width: 48rpx;height: 48rpx;">
						</image>
						<view v-else style="width: 48rpx;height: 48rpx;text-align: center;font-weight: 500;"
							class="flex ai-c jc-c">
							<text style="color:#0F50DC;font-size: 24rpx;" v-if="index + 1 === 1">{{ index + 1
							}}</text>
							<text v-else>{{ index + 1 }}</text>
						</view>
					</view>
					<view class="header-item name-col single-ellipsis"
						style="color: rgba(0, 0, 0, 0.9);font-weight: 500;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.name }}</text>
						<text v-else>{{ item.name }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.dashi
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.dashi }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.zhuanjia
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.zhuanjia }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.gaoji
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.gaoji }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.zhongji
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.zhongji }}</text>
					</view>
					<view class="header-item level-col" style="text-align: right;font-weight: 700;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.level.chuji
						}}</text>
						<text style="font-weight: 700;" v-else>{{ item.level.chuji }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="activeTab === 3" class="tab-content flex-1 flex fd-c">
			<view class="ranking-header" style="background: linear-gradient(97deg, #FFE5E5 0%, #FFFDD5 100%);">
				<view class="header-item rank-col">排名</view>
				<view class="header-item name-col">姓名</view>
				<view class="header-item level-col">大师</view>
				<view class="header-item level-col">专家</view>
				<view class="header-item level-col">高级</view>
				<view class="header-item level-col">中级</view>
				<view class="header-item level-col" style="text-align: right;">初级</view>
			</view>
			<scroll-view class="scrollable-content" scroll-y>
				<view class="ranking-header" style="background: #fff;" v-for="(item, index) in pengyouquanList"
					:key="item.id">
					<view class="header-item rank-col flex ai-c jc-c">
						<image v-if="index + 1 === 1" src="/static/diyiminghuangguan.png"
							style="width: 48rpx;height: 48rpx;">
						</image>
						<image v-else-if="index + 1 === 2" src="/static/diermingxioaguan.png"
							style="width: 48rpx;height: 48rpx;"></image>
						<image v-else-if="index + 1 === 3" src="/static/sanyuan.png"
							style="width: 48rpx;height: 48rpx;">
						</image>
						<view v-else style="width: 48rpx;height: 48rpx;text-align: center;font-weight: 500;"
							class="flex ai-c jc-c">
							<text style="color:#0F50DC;font-size: 24rpx;" v-if="index + 1 === 1">{{ index + 1
							}}</text>
							<text v-else>{{ index + 1 }}</text>
						</view>
					</view>
					<view class="header-item name-col single-ellipsis"
						style="color: rgba(0, 0, 0, 0.9);font-weight: 500;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.username }}</text>
						<text v-else>{{ item.username }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.play1
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.play1 }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.play2 }}</text>
						<text style="font-weight: 700;" v-else>{{ item.play2 }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.play3 }}</text>
						<text style="font-weight: 700;" v-else>{{ item.play3 }}</text>
					</view>
					<view class="header-item level-col" style="font-weight: 700;"> <text
							style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.play4
							}}</text>
						<text style="font-weight: 700;" v-else>{{ item.play4 }}</text>
					</view>
					<view class="header-item level-col" style="text-align: right;font-weight: 700;">
						<text style="font-weight: 700;color:#0F50DC;" v-if="index + 1 === 1">{{ item.play5
						}}</text>
						<text style="font-weight: 700;" v-else>{{ item.play5 }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import {
	ref
} from 'vue'
import api from '@/api'
import {
	useUserStore
} from '@/store/index.js'
import {
	onShow
} from '@dcloudio/uni-app'

const userStore = useUserStore()

onShow(() => {
	// 如果用户已登录，获取最新用户信息
	if (userStore.hasLogin) {
		api.getUserInfo({
			user_id: userStore.userInfo?.id
		}).then(res => {
			userStore.setUserInfo(res.data)
		})
		handleViewAnswers();
	}
})

const handleViewAnswers = () => {
	api.getscorelist({
		user_id: userStore.userInfo?.id
	}).then(res => {
		console.log('查看结果:', res)
		rankingList.value = res.data
	})
}

const getquanlist = () => {
	api.getquanlist({
		user_id: userStore.userInfo?.id
	}).then(res => {
		console.log('查看结果:', res)
		pengyouquanList.value = res.data
	})
}

// tab数据
const tabs = ref([{
	name: '积分榜'
},
{
	name: '朋友圈'
},
{
	name: '区域'
},
{
	name: '全国'
}
])

// 当前激活的tab
const activeTab = ref(0)

// 切换tab
const switchTab = (index) => {
	activeTab.value = index
	if (index == '0') {
		handleViewAnswers();
	}
	if (index == '3') {
		getquanlist();
	}
	console.log(index)

}

const pengyouquanList = ref([])

// 排行榜数据
const rankingList = ref([])

const copyText = (text) => {
	uni.setClipboardData({
		data: text,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			})
		}
	})
}
const handleBack = () => {
	uni.navigateBack()
}
</script>

<style scoped>
.bill-container {
	height: 100vh;
	background-color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.tab {
	background-color: #fff;
}

.tab-nav {
	padding: 0 64rpx;
	height: 88rpx;
}

.tab-item {
	font-size: 32rpx;
	color: #999;
	position: relative;
	transition: color 0.3s ease;
}

.tab-item.active {
	color: #333 !important;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32rpx;
	height: 6rpx;
	background: linear-gradient(90deg, #007AFF 0%, #5856D6 100%);
	border-radius: 2rpx;
}

.content-area {
	min-height: 100%;
}

.tab-content {
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
	overflow: hidden;
	min-height: 0;
}

.scrollable-content {
	flex: 1;
	padding: 0;
	box-sizing: border-box;
	height: 0;
	min-height: 0;
}

.ranking-header {
	display: flex;
	align-items: center;
	background: linear-gradient(97deg, #E5F7FF 0%, #E5E6FF 100%);
	font-weight: 700;
	font-size: 28rpx;
	color: #666;
	padding: 28rpx 32rpx;
	padding-left: 0;
	border-radius: 20rpx;
}

.header-item {
	text-align: center;
}

.rank-col {
	width: 120rpx;
	color: #000;
	font-weight: 700;
	font-size: 24rpx;
}

.name-col {
	flex: 1;
	text-align: left;
	padding-left: 20rpx;
	color: #000;
	font-weight: 700;
	font-size: 24rpx;
}

.level-col {
	width: 90rpx;
	text-align: right;
	color: #000;
	font-weight: 500;
	font-size: 24rpx;
}

.score-col {
	width: 200rpx;
	text-align: right;
	color: #000;
	font-weight: 500;
}

.ranking-items {
	background-color: #fff;
}

.ranking-item {
	display: flex;
	align-items: center;
	padding: 32rpx;
	border-bottom: 1px solid #f0f0f0;
	min-height: 100rpx;
}

.ranking-item:last-child {
	border-bottom: none;
}

.ranking-item.is-current-user {
	background-color: #f8f9ff;
}

/* 排名样式 */
.crown-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	position: relative;
}

.crown-1 {
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
}

.crown-2 {
	background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
	box-shadow: 0 4rpx 12rpx rgba(192, 192, 192, 0.3);
}

.crown-3 {
	background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
	box-shadow: 0 4rpx 12rpx rgba(205, 127, 50, 0.3);
}

.crown-number {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.rank-number {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	text-align: center;
	width: 100%;
}

/* 姓名样式 */
.user-name {
	font-size: 30rpx;
	color: #333;
	font-weight: 400;
}

.user-name.current-user {
	color: #007AFF;
	font-weight: 500;
}

/* 积分样式 */
.total-score {
	font-size: 28rpx;
	color: #333;
	font-weight: 400;
	text-align: right;
}

.total-score.current-user {
	color: #007AFF;
	font-weight: 500;
}
</style>